<template>
    <view>
        <view class="background"></view>
        <navView navTitle="消息通知" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>

        <!-- 消息列表 -->
        <view class="message-container">
            <!-- 修改循环项为具体字段 -->
            <view class="message-card" v-for="item in messageItems" :key="item.key" @tap="go_messagedateil(item)" >
                <view class="card-main">
                    <view class="header">
                        <text class="title">{{ item.msg }}</text>
                        <text class="badge" v-if="item.count > 0">{{ item.count }}</text>
                    </view>
                    <text class="subtitle">{{ getSubtitle(item.key) }}</text>
                </view>
                <uni-icons type="right" size="28rpx" color="#C3C3C3"></uni-icons>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            message:{},
        }
    },
    onLoad(){
        this.getMessageInfo();
    },
    computed: {
        // 过滤有效消息项
        messageItems() {
            return Object.keys(this.message)
                .filter(key => ['leads', 'examine', 'notice', 'agent', 'task'].includes(key))
                .map(key => ({
                    key,
                    ...this.message[key]
                }))
                .sort((a, b) => b.count - a.count); // 按消息数量降序排列
        }
    },    
    methods: {       
        getSubtitle(type) {
            const subtitles = {
                leads: '提醒消息',
                examine: '审批事项提醒',
                notice: '系统重要通知',
                agent: '待办事项提醒',
                task: '超时的任务提醒'
            };
            return subtitles[type] || '新消息提醒';
        },
        getMessageInfo() {
            this.$request('/addons/qingdong/message/getInfo', 'GET').then(res => {                
                this.message = res.data
            })
            console.log(this.message,'获取消息通知');
        },
        go_messagedateil(item) {
            const routeMap = {
                leads: '/pages/message/messagedetail',       // 客户线索
                examine: '/pages/approve/list',          // 审批事项
                notice: '/pages/message/messagedetail',  // 系统通知
                agent: '/pages/message/messagedetail',               // 代办事项
                task: '/pages/message/messagedetail'    // 任务提醒
            };

            uni.navigateTo({
                url: `${routeMap[item.key]}?type=${item.key}&count=${item.count}`
            });
        }
    }
}
</script>

<style lang="less">
.message-container {
    padding: 20rpx 30rpx;

    .message-card {
        display: flex;
        align-items: center;
        padding: 28rpx;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

        .card-left {
            margin-right: 24rpx;

            .type-icon {
                width: 64rpx;
                height: 64rpx;
            }
        }

        .card-main {
            flex: 1;

            .header {
                display: flex;
                align-items: center;
                margin-bottom: 8rpx;

                .title {
                    font-size: 30rpx;
                    color: #333;
                    font-weight: 500;
                }

                .badge {
                    margin-left: 16rpx;
                    background: #FF4D4D;
                    color: #fff;
                    font-size: 24rpx;
                    padding: 4rpx 12rpx;
                    border-radius: 32rpx;
                }
            }

            .subtitle {
                font-size: 26rpx;
                color: #999;
            }
        }
    }
}
</style>